<template>
  <div class="left-top">
    <div class="headers_sale_header">
      <div class="headers_right">
        <span>销售数据</span>
      </div>
      <div class="headers_left">
        <div class="headers_left_select">
          <el-select
            v-model="selectedOption"
            placeholder="选择筛选方式"
            @change="handleSelectChange"
          >
            <el-option label="全部" value="all"></el-option>
            <el-option label="按年" value="year"></el-option>
            <el-option label="按季度" value="quarter"></el-option>
          </el-select>
        </div>
        <div v-if="selectedOption === 'year' || selectedOption === 'quarter'" class="year-picker">
          <el-date-picker
            v-model="selectedYear"
            type="year"
            placeholder="选择年份"
         
          
            value-format="yyyy"
          ></el-date-picker>
        </div>
        <div v-if="selectedOption === 'quarter'" class="quarter-select">
          <el-select v-model="selectedQuarter" placeholder="选择季度">
            <el-option label="第一季度" value="1"></el-option>
            <el-option label="第二季度" value="2"></el-option>
            <el-option label="第三季度" value="3"></el-option>
            <el-option label="第四季度" value="4"></el-option>
          </el-select>
        </div>
        <el-button @click="queryData" style="color: #ffffff;background: #1e4398;  margin-left: 10px">查询</el-button>
      </div>
    </div>
    <div class="content">
        <div class="content_box">
            <div class="content_box_one" v-for="(item,index) in contentItems" :key="index">
                <div class="content_box_one_img">
                    <img :src="item.imgSrc" alt="">
                </div>
                <div class="content_box_one_text">
                    <span>{{ item.value }}</span>
                </div>
                <div class="content_box_one_title">
                    <span>{{ item.title }}</span>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>
  
  <script>
  import { getNavbar } from "@/api/index";
export default {
  data() {
    return {
      selectedOption: "year",
      selectedYear: new Date().getFullYear().toString(),
      selectedQuarter: "",
      contentItems: [
        { title: '立项数量', value: 20, imgSrc: require('../../assets/img/1.png') },
        { title: '年度业务目标|目标完成率', value: 30, imgSrc: require('../../assets/img/2.png') },
        { title: '合同签约金额', value: 40, imgSrc: require('../../assets/img/3.png') },
        { title: '下单金额', value: 50, imgSrc: require('../../assets/img/4.png') },
        { title: '发货金额', value: 60, imgSrc: require('../../assets/img/5.png') },
        { title: '回款金额', value: 70, imgSrc: require('../../assets/img/6.png') },
        { title: '应收账款金额（累计）', value: 80, imgSrc: require('../../assets/img/7.png') },
       
      ],
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
     //获取销售数据
     getlist() {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.sale.getSaleData",
        type: this.selectedOption,
        year: this.selectedYear,
        quarter:this.selectedQuarter,
        company:sessionStorage.getItem("company"),
      };
      getNavbar(param).then((res) => {
  
        const { result, msg, data, id } = res;
        if (result === "ok") {
          this.contentItems[0].value=res.data.orderNum;
          this.contentItems[1].value=res.data.ywmb;
          this.contentItems[2].value=res.data.qyhtje;
          this.contentItems[3].value=res.data.xdje;
          this.contentItems[4].value=res.data.fhje;
          this.contentItems[5].value=res.data.hkje;
          this.contentItems[6].value=res.data.yszk;
     
        }
      });
    },
    handleSelectChange() {
      this.selectedYear = "";
      this.selectedQuarter = "";
    },
    queryData() {
     this.getlist();
    },
  },
};
</script>

<style scoped >
/deep/ .el-input__icon{
  line-height: 31px !important;
}
.titles {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 13px;
  color: #333333;
}

.hovered .titles {
  color: #1e4398; /* 鼠标悬停时标题颜色 */
  cursor: pointer;
}

.new-icon {
  margin-left: 4px; /* 新图标与标题之间的间距 */
  width: 36px;
  height: 18px;
}

.date {
  margin-left: auto; /* 日期靠右对齐 */
  font-size: 12px; /* 日期字体大小 */
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
.left-top {
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 2px 6px 0px rgba(139, 157, 175, 0.1);
  border-radius: 10px;
}

.headers_sale_header {
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.headers_sale_header .headers_left span {
  font-family: "PingFang SC", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #323333;
}
.headers_right {
  display: flex;
}
.headers_right span{
  font-family: "PingFang SC", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #323333;
}
.headers_right .headers_right_title {
  font-family: "PingFang SC", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #323333;
  margin-left: 15px;
  cursor: pointer;
  transition: background 0.3s; /* 添加过渡效果 */
}
.headers_left_select{
    margin-right: 20px;
  }
.headers_left {
  display: flex;
  align-items: center;
 

} 



.year-picker{
    margin-right: 20px;
  }
.headers_left_input {
  margin-right: 20px;
}

.headers_left_more {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #1e4398;
  cursor: pointer;
}
.carous_img {
  width: 100%;
  height: 100%;
}

.headers_sale_header span {
  border-left: 4px solid #1e4398;
  padding-left: 9px;
}

.content {
  margin-top: 10px; /* 内容与标题之间的间距 */
}
.content_box{
    display: flex;
    justify-content: space-around;
}
.content_box_one{
    text-align: center;
}
.content_box_one_img{
   
 
}
.content_box_one_img img{
    width: 42px;
    height: 42px;
    margin: 0 auto;
}
.content_box_one_text{
    margin-top: 6px;
}
.content_box_one_text span{
    font-family: DIN Next LT Pro;
    font-weight: 500;
    font-size: 22px;
    color: #1E4398;
}
.content_box_one_title{
    margin-top: 6px;
}
.content_box_one_title span{
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #666666;
}
</style>
    